import { Meta, StoryObj } from "@storybook/react/*";
import Input from "./input";
import { useState } from "react";

const meta: Meta<typeof Input> = {
    title: 'Input 输入框',
    component:Input,
    tags: ['autodocs'],
    argTypes: {
        value:{
            control: 'text',
            description:'输入框内容'
        },
        onChange:{
            description:'输入框内容变化时的回调'
        },
        size: {
            options: ['lg', 'sm'],
            control: "radio",
            description:'输入框尺寸'
        },
        disabled: {
            control: "boolean",
            description:'是否禁用'
        },
        icon: {
            description:'输入框图标'
        },
        prepend: {
            control: 'text',
            description:'输入框前缀'
        },
        append: {
            control: 'text',
            description:'输入框后缀'
        },
        allowClear:{
            control:'boolean',
            description:'是否允许清除'
        },
        onClear:{
            description:'清除按钮点击时的回调'
        }
    }
}

export default meta;

type Story = StoryObj<typeof meta>

export const defaultInput:Story = {
    args:{
        placeholder: '请输入内容'
    },
    render: (args) => {
        return <Input {...args} defaultValue="111"/>
    }
}
defaultInput.storyName = '默认的输入框 Input'

export const diffSizeInput:Story = {
    args:{
        placeholder: '请输入内容'
    },
    render: (args) => {
        return (
            <>
                <Input size="sm" {...args}/>
                <Input size="lg" {...args}/>
            </>
        )
    }
}
diffSizeInput.storyName = '不同尺寸的输入框 Input'

export const disabledInput:Story = {
    args:{
        placeholder: '请输入内容'
    },
    render: (args) => {
        return <Input disabled {...args}/>
    }
}
disabledInput.storyName = '禁用的输入框 Input'

export const appendInput:Story = {
    args:{
        placeholder: '请输入内容'
    },
    render: (args) => {
        return (
            <>
                 <Input prepend="https://" {...args}/>
                 <Input append=".com" {...args}/>
            </>
        )
    }
}
appendInput.storyName = '带有前缀或者后缀的输入框 Input'

export const clearInput:Story = {
    args:{
        placeholder: '请输入内容'
    },
    render: (args) => {
        const [iptValue,setIptValue] = useState('')
        return (
            <>
                 <Input allowClear {...args} value={iptValue} onChange={(e) => setIptValue(e.target.value)} />
            </>
        )
    }
}
clearInput.storyName = '带有清除按钮功能的输入框 Input'

export const IconInput:Story = {
    args:{
        placeholder: '请输入内容'
    },
    render: (args) => {
        return (
            <>
                 <Input icon="search"  { ...args }/>
            </>
        )
    }
}
IconInput.storyName = '带有Icon图标的输入框 Input'

